<template>
	<view class="wrap-flex">
		<mo-status-bar/>
		<!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
		<me-tabs v-model="tabIndex" :tabs="tabList" :height="88" :fixed="false" :tab-width="100"></me-tabs>
		
		<swiper class="swiper-wrap" :current="tabIndex" @change="swiperChange">
			<swiper-item v-for="(tab,i) in tabList" :key="i">
				<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabList" :tab="tab" ></mescroll-item>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import MescrollItem from "./components/mescroll-swiper-item.vue";
	import meTabs from "@/components/me-tabs/me-tabs.vue";
	import { mapActions, mapState } from 'vuex'
	
	export default {
		components: {
			MescrollItem,
			meTabs
		},
		data() {
			return {
				height: "400px", // 需要固定swiper的高度
				tabIndex: 1 // 当前tab的下标
			}
		},
		computed:{
			...mapState('novel', ['tabList']),
		},
		methods: {
			...mapActions('novel',['getStatistics', 'getGender']),
			async initData(){
				// 获取分类
				await this.getStatistics()
				await this.getGender()
				// console.log(this.statistic)
			},
			// 轮播菜单
			swiperChange(e){
				this.tabIndex = e.detail.current
			},
			// 获取指定下标的mescroll对象
			// getMescroll(i){
			// 	let mescrollItems = this.$refs.mescrollItem;
			// 	if(mescrollItems){
			// 		let item = mescrollItems[i]
			// 		if(item) return item.mescroll
			// 	}
			// 	return null
			// }
		},
		onLoad() {
			this.initData()
		},
		onShow() {
			// 返回刷新: https://www.mescroll.com/uni.html#note 第二点
			// if(this.canReset){
			// 	let curMescroll = this.getMescroll(this.tabIndex)
			// 	curMescroll && curMescroll.resetUpScroll()
			// }
			// this.canReset = true
		}
	}
</script>

<style lang="scss" scoped>
.wrap-flex{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	height: calc(100vh);
	/* #ifndef MP-WEIXIN */
	height: calc(100vh - 88rpx - constant(safe-area-inset-bottom));
	height: calc(100vh - 88rpx - env(safe-area-inset-bottom));
	/*  #endif  */
	& > swiper{
        flex: 1;
        height: 100%;
        width: 100%;
        overflow: hidden;
	}
	.swiper-wrap{
		display: flex;
	}
}
</style>
